<style>
</style>
<template>
    <ly-page>
        <ly-navi title="剪贴板"></ly-navi>
        <ly-page-content>
            <el-form size="small">
                <el-form-item label="">
                    <el-input placeholder="请输入内容" v-model="message">
                        <template slot="append">
                            <el-button
                                    v-clipboard:copy="message"
                                    v-clipboard:success="onCopy"
                                    v-clipboard:error="onError"
                                    type="primary">复制
                            </el-button>
                        </template>
                    </el-input>

                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
<el-input placeholder="请输入内容" v-model="message">
    <templ slot="append">
        <el-button
                v-clipboard:copy="message"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                type="primary">复制</el-button>
    </templ>
</el-input>
                    </pre>
                </ly-code-view>

                <ly-markdown>
<pre v-pre>
## 指令 `v-clipboard`

#### Attributes

| 属性名  |说明   | 类型|参数|
| ------------ | ------------ |------------ |------------ |
|  v-clipboard:copy | 需要拷贝的值	  |string |—	|
|  v-clipboard:success | 成功回调方法	  |function |—	|
|  v-clipboard:error | 失败回调方法	  |function |—	|

                  </pre>
                </ly-markdown>
            </el-form>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    message: '需要复制的文本'
                }
            },
            mounted: function () {

            },
            methods: {
                onCopy: function () {
                    this.$notify({
                        title: '提示',
                        message: '复制成功',
                        type: 'success'
                    });

                }, onError: function () {
                    this.$notify({
                        title: '提示',
                        message: '复制失败',
                        type: 'error'
                    });
                }
            }
        }
    })
</script>